<template>
  <el-container>
    <el-header>
      <el-menu :default-active="$route.path" router mode="horizontal">
        <el-menu-item><img  style="position: absolute;width: 125px;margin-top: 10px;" src="../assets/img.png" @click="toHomePage()" alt></el-menu-item>
        <el-menu-item style="margin-left: 200px;font-size: 17px;color: #2874cb;padding-top: 25px;">
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{path: '/mainPage'}">我的课堂</el-breadcrumb-item>
            <el-breadcrumb-item>用户设置</el-breadcrumb-item>
          </el-breadcrumb>
        </el-menu-item>
        <div class="h-right">
          <div style="float: left;"><a href="https://ktp.paper880.com/" style="text-decoration: none;color: black;"><i class="el-icon-search"></i>论文查重</a></div>
          <div>
            <span style="margin-left: 25px;cursor:pointer;" @click="toTaskManagement"><i class="el-icon-document"></i>任务管理</span>
            <span style="margin: 0 12px;"><i class="el-icon-bell"></i></span>欢迎您,
            <el-dropdown>
              <span class="el-dropdown-link"><i class="el-icon-s-custom"></i>{{this.userInfo.name}}</span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item><span @click="goSettings()"><i class="el-icon-s-tools"></i>个人设置</span></el-dropdown-item>
                <el-dropdown-item><span @click="logout()"><i class="el-icon-remove"></i>退出登录</span></el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </div>
      </el-menu>
    </el-header>
    <el-main class="concise-background">
      <div style="width: 1000px;height: 160px;background-color: #fafafa;margin: auto;">
        <div style="width: 400px;float: left;height: 160px;">
          <el-avatar style="width: 100px;height: 100px;margin: 25px 25px;">
            <el-upload
              action="http://localhost:8081/files/upload"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload">
              <img :src="'http://localhost:8081/files/' + this.userInfo.avatar" class="avatar">
            </el-upload>
          </el-avatar>
          <P style="margin: -110px 150px;font-size: 25px;">{{this.userInfo.name}}</P>
        </div>
      </div>
      <p style="font-size: 18px;margin-left: 232px;">账户信息</p>
      <div style="width: 1000px;height: 500px;background-color: #fafafa;margin: auto;">
          <div style="width: 950px;height: 475px;padding-top:25px;margin:auto;background-color: #ffffff">
            <el-form  class="el-form el-form--label-left active">
              <div class="el-form-item el-form-item-medium">
                <label class="el-form-item__label" style="width:100px;">账号</label>
                <div class="el-form-item__content" style="margin-left: 100px;">
                  <span>{{userInfo.username}}</span>
                </div>
              </div>
              <hr>
              <div class="el-form-item el-form-item-medium">
                <label class="el-form-item__label" style="width:100px;">所属角色</label>
                <div class="el-form-item__content" style="margin-left: 100px;">
                  <span>{{userInfo.role}}</span>
                </div>
              </div>
              <hr>
              <div class="el-form-item el-form-item-medium">
                <label class="el-form-item__label" style="width:100px;">姓名</label>
                <div class="el-form-item__content" style="margin-left: 100px;">
                  <span>{{userInfo.name}}</span>
                </div>
              </div>
              <hr>
              <div class="el-form-item el-form-item-medium">
                <label class="el-form-item__label" style="width:100px;">学校</label>
                <div class="el-form-item__content" style="margin-left: 100px;">
                  <span>{{userInfo.school}}</span>
                </div>
              </div>
              <hr v-if="userInfo.role === '学生'">
              <div class="el-form-item el-form-item-medium" v-if="userInfo.role === '学生'">
                <label class="el-form-item__label" style="width:100px;">学号</label>
                <div class="el-form-item__content" style="margin-left: 100px;">
                  <span>{{userInfo.stuId}}</span>
                </div>
              </div>
              <hr>
              <div class="el-form-item el-form-item-medium">
                <label class="el-form-item__label" style="width:100px;">密码</label>
                <div class="el-form-item__content" style="margin-left: 100px;">
                  <span>******</span>
                  <span @click="changePassword(userInfo.password)" style="margin-right: 25px;float: right;font-size: 18px;color: #2874cb;cursor: pointer;">修改密码</span>
                </div>
              </div>
            </el-form>
          </div>
      </div>
    </el-main>
  </el-container>
</template>

<script>
import axios from "axios";

export default {
  name: "Settings",
  data(){
    return{
      userInfo: null,
    }
  },
  methods: {
    changePassword(password){
      this.$prompt('请输入新密码', '修改密码', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: /^((?=.*[a-zA-Z])(?=.*\d|.*[^\w\s])|^(?=.*\d)(?=.*[a-zA-Z]|.*[^\w\s])|^(?=.*[^\w\s])(?=.*[a-zA-Z]|.*\d)).{6,20}$/,
        inputErrorMessage: '密码格式不正确(6~20个字符,字母、数字以及标点符号至少包含2种)'
      }).then(({ value }) => {
        this.$message({
          type: 'success',
          message: '修改成功'
        });
        let url = "http://localhost:8081/changePassword";
        if(this.userInfo.role === '老师'){
          url = "http://localhost:8081/changePasswordT";
        }
        axios.post(url,{
          stuId: this.userInfo.stuId,
          teacherId: this.userInfo.id,
          password: value
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消修改'
        });
      });
    },
    toHomePage() {
      this.$router.push("/homePage")
    },
    toTaskManagement(){
      this.$router.push("/taskManagement")
    },
    goSettings() {
      this.$router.push("/settings")
    },
    logout() {
      localStorage.removeItem('userInfo')
      this.$router.push("/login")
    },
    handleAvatarSuccess(res) {
      this.userInfo.avatar = res.data;
      let url = "http://localhost:8081/uploadAvatar";
      if(this.userInfo.role === '老师')
        url = "http://localhost:8081/uploadAvatarT";
      axios.post(url,{
        profilePicture: this.userInfo.avatar,
        teacherId: this.userInfo.id,
        stuId: this.userInfo.stuId
      }).then(response =>{
        if(response.status === 200){
          this.$message.success("上传头像成功!")
        }
      })
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    }
  },
  mounted() {
    // 在组件加载时从LocalStorage中获取用户信息
    const userInfoString = localStorage.getItem('userInfo');
    if (userInfoString) {
      this.userInfo = JSON.parse(userInfoString);
    }
  }
}
</script>

<style scoped>
.concise-background{
  background-image: url("../assets/concisebg.jpg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.el-form--label-left{
  margin: 25px 25px;
  border: 1px darkgray solid;
  border-radius: 5px;
  border-left: 6px #2874cb solid;
}
.el-form-item-medium{
  margin-left: 25px;
  margin-bottom: 5px;
}
.avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  display: block;
}
.h-right{
  float: right;
  width: 490px;
  margin-top: 25px;
  font-size: 17px;
}
.el-dropdown-link{
  cursor:pointer;
  color: #409EFF;
}
</style>
